<template>
  <div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50">
    <div class="container mx-auto px-4 py-8 pb-24">
      <!-- 头部欢迎区域 -->
      <div class="text-center mb-12 animate-fade-in">
        <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-4">
          欢迎使用 nuxt-kunitem
        </h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
          一个基于 Nuxt.js 的现代化应用示例，为您带来卓越的用户体验
        </p>
      </div>

      <!-- 功能介绍卡片 -->
      <div class="mb-12">
        <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">
          核心功能
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div
            v-for="(feature, index) in appConfig.tabBar.items"
            :key="index"
            class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100"
          >
            <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mb-4">
              <UIcon
                :name="feature.icon"
                class="w-6 h-6 text-indigo-600"
              />
            </div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">
              {{ feature.title }}
            </h3>
            <p class="text-gray-600">
              {{ feature.description }}
            </p>
          </div>
        </div>
      </div>

      <!-- CTA 按钮 -->
      <div class="text-center mt-12">
        <UButton
          to="/demo"
          variant="solid"
          color="primary"
          size="lg"
          class="px-8 py-3 text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"
        >
          <UIcon
            name="i-heroicons-arrow-right-circle"
            class="w-5 h-5 mr-2"
          />
          访问 Demo 页面
        </UButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

<style scoped>
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out;
}
</style>
